<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ngAnimate插件5</title>
    <script src="../../lib/jquery/jquery-1.10.2.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
    <style type="text/css">
        .box{width:200px;height:200px;background-color:red;}
    </style>
</head>
<body>
<div ng-controller="Aaa">
    <input type="checkbox" ng-model="bBtn">
    <div class="box" ng-if="bBtn"></div>
</div>
<script type="text/javascript">
    var m1 = angular.module('myApp',['ngAnimate']);
    //ng-if
    m1.animation('.box',function(){
        return {
//hide（删除）
            leave : function(element,done){
//console.log(element,done); //元素节点&删除节点的回调函数
                $(element).animate({
                    width : 0,
                    height : 0
                },1000,done);
            },
//show（填充）
            enter : function(element,done){
//ng-if会动态创建元素，元素默认就有200的高宽。。。
                $(element).css({
                    width : 0,
                    height : 0
                }).animate({
                    width : 200,
                    height : 200
                },1000,done);
            }
        };
    });
    m1.controller('Aaa',['$scope',function($scope){
        $scope.bBtn = true;
    }]);
</script>
</body>
</html>